<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>长方体</title>
<style type="text/css">
/* 长方体 */
.ani-cube{
	position: relative;
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(50deg);
}
.ani-cube .ani-cube-item{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	border: 1px solid #DDD;
	box-sizing: border-box;
}
.ani-cube .ani-cube-item.ani-cube-item-1{
	transform: translateZ(50px);
}
.ani-cube .ani-cube-item.ani-cube-item-2{
	transform: translateZ(-50px) rotateY(180deg);
}
.ani-cube .ani-cube-item.ani-cube-item-3{
	transform: translateY(-50px) rotateX(90deg);
}
.ani-cube .ani-cube-item.ani-cube-item-4{
	transform: translateY(50px) rotateX(-90deg);
}
.ani-cube .ani-cube-item.ani-cube-item-5{
	transform: translateX(-50px) rotateY(-90deg);
}
.ani-cube .ani-cube-item.ani-cube-item-6{
	transform: translateX(50px) rotateY(90deg);
}	
</style>
<style type="text/css">
body{
	margin: 100px;
}
.ani-cube1{
	width: 120px; 
	height: 80px;
}
.ani-cube1 .ani-cube-item.ani-cube-item-1{
	transform: translateZ(30px);
}
.ani-cube1 .ani-cube-item.ani-cube-item-2{
	transform: translateZ(-30px) rotateY(180deg);
}
.ani-cube1 .ani-cube-item.ani-cube-item-3{
	width: 120px; 
	height: 60px; 
	top: 10px; 
	transform: translateY(-40px) rotateX(90deg);
}
.ani-cube1 .ani-cube-item.ani-cube-item-4{
	width: 120px; 
	height: 60px; 
	top: 10px; 
	transform: translateY(40px) rotateX(-90deg);
}
.ani-cube1 .ani-cube-item.ani-cube-item-5{
	width: 60px; 
	height: 80px; 
	left: 30px; 
	transform: translateX(-60px) rotateY(-90deg);
}
.ani-cube1 .ani-cube-item.ani-cube-item-6{
	width: 60px; 
	height: 80px; 
	left: 30px; 
	transform: translateX(60px) rotateY(90deg);
}
</style>
</head>
<body>
	<div class="ani-cube ani-cube1">
		<div class="ani-cube-item ani-cube-item-1">正面</div>
		<div class="ani-cube-item ani-cube-item-2">背面</div>
		<div class="ani-cube-item ani-cube-item-3">上方</div>
		<div class="ani-cube-item ani-cube-item-4">下方</div>
		<div class="ani-cube-item ani-cube-item-5">左侧</div>
		<div class="ani-cube-item ani-cube-item-6">右侧</div>
	</div>
</body>
</html>